<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            justify-content: space-around;
        }

        main {
            border: 20x solid rgba(41, 37, 37, 0.686);
            margin: 60px;
            box-sizing: border-box;
            justify-content: space-between;
            display: flex;
            flex-wrap: wrap;
            width: 1000px;
            height: 800px;
        }

        main .box {
            box-sizing: border-box;
            width: 240px;
            height: 400px;
            border: 1px solid rgb(171, 171, 171);
        }

        main .box img {
            width: 100%;
            height: 80%;
        }

        main .box .bnn {
            color: antiquewhite;
            background-color: rgb(237, 46, 46);
            border: 0;
            width: 80px;
            height: 30px;
        }

        .right {
            display: flex;
            flex-direction: column;
            width: 400px;
            height: 800px;
            margin: 60px;
            background-color: rgb(209, 241, 240);
        }

        h3 {
            margin: 20px;
        }

        .right .xia {
            box-sizing: border-box;
            display: flex;
            justify-content: space-around;
            width: 100%;
            height: 760px;
        }
        .right .small {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-around;
            width: 100%;
            height: 150px;
            background-color: rgb(166, 192, 192);
        }

        .right .small .zhong .imm {
            width: 80px;
        }
        .right>.small>.zhong>p{
            font-size: 12px;
            align-self: end;
        }

        .inn {
            width: 20px;
            height: 20px;
        }

        .right .small .jishi {
            line-height: 30px;
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: rgb(79, 79, 79);
        }

        .right .small .jiage {
            line-height: 30px;
            display: inline-block;
            height: 30px;
            background-color: rgb(79, 79, 79);
            text-align: center;
            width: 60px;
        }

        .right .small .remove {
            font-size: 18px;
        }

        .right .small .but {
            width: 20px;
            background-color: gray;
        }

        .right .small .buts {
            width: 20px;
            background-color: gray;
        }
    </style>
</head>

<body>
    <main>
    </main>
    <div class="right">
        <h3>购物车(0)</h3>
        <div class="xia">
            <!-- <div class="small">
                <input class="inn" type="checkbox">
                <img class="imm" src="img/pic1.png" alt="">
                <button class="but">+</button>
                <span class="jishi"></span>
                <button class="buts">-</button>
                <span class="jiage">100</span>
                <span class="remove">删除收藏</span>
            </div> -->
        </div>
    </div>
</body>

</html>
<script>

    class gowuche {
        constructor(main, xiaEle, arr,arr2) {
            this.data = arr
            this.mainEle = main
            this.xiaEle = xiaEle
            this.render()
            this.bindon()

        }
        // 图片渲染
        render() {
            // ================渲染样式===============================
            var str = ``
            for (var i = 0; i < this.data.length; i++) {
                str += `
                <div class="box">
                    <img src="${this.data[i].pic}" alt="">
                    <span>${this.data[i].name}</span>
                    <p>${this.data[i].jiage}</p>
                    <button class= "bnn">${this.data[i].xh}</button>
                </div>
                `
           
            // forEach循环===================================
            // this.data.forEach((item,index)=>{
            //     str +=`
            //     <div class="box">
            //         <img src="${item[index].pic}" alt="">
            //         <p>${item[index].name}</p>
            //         <p>${item[index].jiage}</p>
            //         <button class= "bnn">${item[index].xh}</button>
            //     </div>
            //     `
            // })
            // ================渲染购物车===============================
            var str2 = ` 
            <div class="small">
                <input class="inn" type="checkbox">
                <div class="zhong">
                    <img class="imm" src="${this.data[i].pic}" alt="">
                    <p>${this.data[i].name}</p>
                </div>
                <button class="but">${"+"}</button>
                <span class="jishi"></span>
                <button class="buts">${"-"}</button>
                <span class="jiage">${"100"}</span>
                <span class="remove">${"删除收藏"}</span>
            </div>`
        }
            this.mainEle.innerHTML = str
            this.xiaEle.innerHTML= str2
           
        }

        bindon() {
            this.mainEle.document.querySelector('button').onclick = ()=> {
                this.render()
                console.log('渲染');
            }
        }
    }
    let mainEle = document.querySelector('main')
    let xiaEle = document.querySelector('.xia')
    let arr=[
        {name:"高级办公椅",pic:'img/pic1.png',jiage:10000,xh:"加入购物车"},
        {name:"高级办公椅",pic:'img/pic2.png',jiage:1000,xh:"加入购物车"},
        {name:"电动按摩椅",pic:'img/pic3.png',jiage:100,xh:"加入购物车"},
        {name:"高级办公椅",pic:'img/pic4.png',jiage:10,xh:"加入购物车"},
        {name:"老板椅",pic:'img/pic5.png',jiage:20000,xh:"加入购物车"},
        {name:"办公桌",pic:'img/pic6.png',jiage:50000,xh:"加入购物车"},
        {name:"升降办公椅",pic:'img/pic7.png',jiage:2000,xh:"加入购物车"},
        {name:"升降办公桌",pic:'img/pic8.png',jiage:5000,xh:"加入购物车"},
    ]
    var gowuches = new gowuche(mainEle,xiaEle, arr)























    // var goodlist= []
    // var ss = new Proxy(s,{
    //         set:(a,b,c)=>{
    //             console.log('set');
    //             renderGouwuche();
    //         } ,
    //         get:(a,b,c)=>{ console.log('获取了s对象',a,b,c) }
    //     })

</script>